<template>
  <div>
    <el-row>
      <el-col :span="15">
        <div class="banner">
          <img src="@/assets/banner-left.png" class="left" alt="" />
          <img src="@/assets/banner-right.png" class="right" alt="" />
          <img src="@/assets/avatar.png" class="user-header" alt="" />
          <p class="user-title">仓储管理员</p>
          <p class="subject-title">我不是为了输赢,我就是认真</p>
          <p class="author">——罗永浩</p>
          <div class="site">
            <p class="title">北京总仓</p>
          </div>
        </div>
        <div class="blaok">
          <div class="subject">待办信息</div>
          <div class="item-list">
            <div
              class="el-col-8"
              style="padding-left: 15px; padding-right: 15px"
            >
              <div class="backlog-item">
                <div class="icon" style="background: rgb(0, 118, 225)">
                  <i class="change iconfont el-icon-present"></i>
                  <div class="title">{{ item1.name }}</div>
                </div>
                <div class="bottom">
                  <div class="spanlabel">新增</div>
                  <div class="spanValue">{{ item1.value1 }}</div>
                  <div class="spanlabel">待审核</div>
                  <div class="spanValue" style="color: rgb(0, 118, 255)">
                    {{ item1.value2 }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="el-col-8"
              style="padding-left: 15px; padding-right: 15px"
            >
              <div class="backlog-item">
                <div class="icon" style="background: rgb(255, 178, 0)">
                  <i class="change iconfont el-icon-present"></i>
                  <div class="title">{{ item2.name }}</div>
                </div>
                <div class="bottom">
                  <div class="spanlabel">新增</div>
                  <div class="spanValue">{{ item2.value1 }}</div>
                  <div class="spanlabel">待审核</div>
                  <div class="spanValue" style="color: rgb(255, 178, 0)">
                    {{ item2.value2 }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="el-col-8"
              style="padding-left: 15px; padding-right: 15px"
            >
              <div class="backlog-item">
                <div class="icon" style="background: rgb(255, 113, 0)">
                  <i class="change iconfont el-icon-present"></i>
                  <div class="title">{{ item3.name }}</div>
                </div>
                <div class="bottom">
                  <div class="spanlabel">新增</div>
                  <div class="spanValue">{{ item3.value1 }}</div>
                  <div class="spanlabel">待审核</div>
                  <div class="spanValue" style="color:rgb(255, 113, 0;">
                    {{ item3.value2 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="message">
          <div class="xiala" style="font-weight: 700; line-height: 70px">
            通知/公告
          </div>
          <div class="xiala">
            <p>紧急盘点通知</p>
            <span>2020.12.30&nbsp;18:23:14</span>
          </div>
          <div class="xiala">
            <p>运维服务更新通知</p>
            <span>2021.01.25&nbsp;18:23:14</span>
          </div>
          <div class="xiala">
            <p>客户入库变更通知</p>
            <span>2021.01.26&nbsp;18:23:14</span>
          </div>
          <div class="xiala">
            <p>五一放假通知</p>
            <span>2021.02.15&nbsp;18:23:14</span>
          </div>
          <div class="xiala">
            <p>品达物流系统对接通知</p>
            <span>2021.3.25&nbsp;18:23:14</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="task">
      <p style="font-weight: 700">任务导航</p>
      <div class="el-col-5" style="padding-left: 15px; padding-right: 15px">
        <div class="task-item">
          <div class="icon" style="background: rgb(0, 118, 225)">
            <i class="change iconfont el-icon-wallet"></i>
          </div>
          <div class="title">收货任务</div>
        </div>
      </div>
      <div class="el-col-5" style="padding-left: 15px; padding-right: 15px">
        <div class="task-item">
          <div class="icon" style="background: rgb(82, 212, 243)">
            <i class="change iconfont el-icon-wallet"></i>
          </div>
          <div class="title">上架任务</div>
        </div>
      </div>
      <div class="el-col-5" style="padding-left: 15px; padding-right: 15px">
        <div class="task-item">
          <div class="icon" style="background: rgb(255, 113, 0)">
            <i class="change iconfont el-icon-wallet"></i>
          </div>
          <div class="title">盘点任务</div>
        </div>
      </div>
      <div class="el-col-5" style="padding-left: 15px; padding-right: 15px">
        <div class="task-item">
          <div class="icon" style="background: rgb(255, 96, 158)">
            <i class="change iconfont el-icon-wallet"></i>
          </div>
          <div class="title">拣货任务</div>
        </div>
      </div>
      <div class="el-col-5" style="padding-left: 15px; padding-right: 15px">
        <div class="task-item">
          <div class="icon" style="background: rgb(255, 178, 0)">
            <i class="change iconfont el-icon-wallet"></i>
          </div>
          <div class="title">交接任务</div>
        </div>
      </div>
    </div>
    <div class="echars">
      <span style="font-weight: 700">入库/出库信息</span>
      <el-button style="backgroundcolor: rgb(255, 178, 0); margin-left: 900px"
        >本周</el-button
      >
      <el-button style="margin-left: -2px">本月</el-button>
      <el-button style="margin-left: -2px">全年</el-button>
      <div id="main" style="width: 1200px; height: 500px"></div>
    </div>
    <div class="bottomss">
      <div class="leftuse">
        <span style="font-weight: 700">库存使用情况</span>
        <div id="mainn" style="width: 300px; height: 300px"></div>
      </div>
      <div class="rightuse">
        <span style="font-weight: 700">库存使用情况</span>
        <div id="mainnn" style="width: 500px; height: 300px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { index, kucun } from '@/api/index.js'
import * as echarts from 'echarts'
import '@/style/index.less'

export default {
  data() {
    return {
      activeIndex2: '1',
      item1: '',
      item2: '',
      item3: '',
      item4: [],
    }
  },
  created() {
    this.index()
    this.kucun()
  },
   methods: {
    async index() {
      const {
        data: { data },
      } = await index()
      // console.log(data)
      this.item1 = data[0]
      this.item2 = data[1]
      this.item3 = data[2]
      // console.log(this.item1)
    },
    async kucun() {
      const {
        data: { data },
      } = await kucun()
      this.item4 = data
      // console.log(data)
    },
  },
  mounted() {
     this.kucun()
    const chartDom = document.getElementById('main')
    const myChart = echarts.init(chartDom)
    const option = {
      legend: {
        data: ['入库', '出库'],
        bottom: 10,
      },
      color: ['#ff7100', '#f4b63f'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      series: [
        {
          name: '入库',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
        {
          name: '出库',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
      ],
      grid: {
        top: '50px',
        left: '50px',
        right: '15px',
      },
    }

    option && myChart.setOption(option)

    const chartDom1 = document.getElementById('mainn')
    const myChart1 = echarts.init(chartDom1)
    const option1 = {
      tooltip: {
        trigger: 'item',
      },

      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            // label: {
            //   // show: true,
            //   fontSize: 40,
            //   fontWeight: 'bold'
            // }
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1800, name: '可用库存64%' },
            { value: 1000, name: '可用库存36%' },
            // { value:this.item4[0].value,name:this.item4[0].name  }
          ],
        },
      ],
    }

    option && myChart1.setOption(option1)

    const chartDom2 = document.getElementById('mainnn')
    const myChart2 = echarts.init(chartDom2)
    const option2 = {
      // title: {
      //   text: 'Referer of a Website',
      //   subtext: 'Fake Data',
      //   left: 'center'
      // },
      tooltip: {
        trigger: 'item',
      },
      // legend: {
      //   orient: 'vertical',
      //   left: 'left'
      // },

      series: [
        {
          type: 'pie',
          radius: '50%',
          data: [
            { value: 348, name: '拣货区:17.98%' },
            { value: 487, name: '出货区:25.15%' },
            { value: 677, name: '暂存库区:34.97%' },
            { value: 126, name: '进货暂存区:6.51%' },
            { value: 298, name: '进货暂存区:15.19%' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }

    option && myChart2.setOption(option2)
  },
 
}
</script>

<style lang="less" scoped></style>
